iT邦幫忙

2022 iThome 鐵人賽

DAY 22
1
自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列 第 22

Day22:Ant Design 裡的 Tag

  • 分享至 

  • xImage
  •  

  今天要分享的是現在網頁和聊天軟體都很常見的 Tag,現在像是 Facebook, Instagram, Line 或是網路文章與問答,還有現在我們使用的 IT 邦幫忙都是有提供 Tag 的標籤功能,讓使用者可以更快速的看到一些關鍵字或方便快速查找確定內容。既然這麼常看見,就來跟大家介紹一下 ANTD 的 Tag 是怎麼使用的吧~

一、ANTD Tag 最基本的使用方式:引用與呼叫它

import { Tag } from 'antd';
import { FacebookOutlined,} from '@ant-design/icons';

const App = () => (
  <div>
    <Tag color="#f00">紅色的標籤</Tag>
    <Tag icon={<FacebookOutlined />} color="#3b5999">
      Facebook
    </Tag>
  <div/>
);

export default App;  

二、Tag 可添加的參數

  因為Tag其實就是一個簡單的div組成的,參數並不多,這邊介紹的也幾乎是全部了,如果有想直接看到範例的話,也可以點此連結去看更多官方 api 文件

屬性名稱 可以使用的值 說明
color 字串 定義tag的顏色,都沒有設置的話會是淺灰色(#fafafa)。ANTD有提供一些預設顏色(如下圖),或者可以自行給hex color。
icon ReactNode 如果想為tag添加圖標則可以使用這個參數。
closable true 或 false 如同字面所指,用來定義此 tag 是否可被移除,預設是否,有需要者須自行設為true
closeIcon ReactNode 與 closable 搭配使用,可以自定義那個移除鈕的樣式。
onClose () => {} 就是移除(關閉)tag時,要定義的function。

  這邊比較值得一提的是,color這個屬性雖然給予我們客製化色彩的參數設定,但若是使用自行定義的 hex color,例如給予 color="#fa0" ,那就會完全是一個橘色底的tag,不會有外框,tag的字也會是白色,當然可以在css中再行設定字的顏色,可是就是會多一趟工,對於想要每個tag都呈現不同自定義樣式的人來說,會稍微比較麻煩一點。那如果喜歡ANTD提供的預設顏色,當然看起來也會統一一些。

https://ithelp.ithome.com.tw/upload/images/20221007/20140920In5rJpf0GS.png
ANTD提供的 tag 預設顏色種類(可直接輸入英文單字)

三、Tag 實際使用範例

看完上面簡單的介紹後,下面提供我的一些簡單範例,若大家有興趣也可以到線上編輯器裡玩玩看唷!

https://ithelp.ithome.com.tw/upload/images/20221007/20140920fk4VUL6paS.png
先前專案元件示意圖

其實 Tag 這種東西大家也可以自行做一個,自由度與美觀肯定更高一些,但如果正好在使用 ANTD 這個 library,倒是可以參考使用唷~


上一篇
Day21:Ant Design 裡的 Pagination
下一篇
Day23:Ant Design 裡的 Form 表單(part1)
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kk00915
iT邦新手 4 級 ‧ 2022-10-18 10:24:41

無所不在的簡單實用功能

我要留言

立即登入留言